<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="70%" @ok="handleSubmit">
    <BasicForm @register="registerForm">
       <template #userInfo>
<!--         v-if="isUpdate"-->
         <Descriptions size="small" title=""
                       style="margin-top: 10px;" >

           <DescriptionsItem label="姓名">
             {{dataList.userName}}
           </DescriptionsItem>
           <DescriptionsItem label="性别">
             {{dataList.gender}}
           </DescriptionsItem>
           <DescriptionsItem label="出生日期">
             {{dataList.birthdate?util.formatDate(new Date(dataList.birthdate)):'' }}
           </DescriptionsItem>
           <DescriptionsItem label="入职日期">
             {{dataList.addTime?util.formatDate(new Date(dataList.addTime)):''}}
           </DescriptionsItem>
           <DescriptionsItem label="职位">
             {{dataList.roleName}}
           </DescriptionsItem>
         </Descriptions>
       </template>
      <template #items="{ model, field }">
        <vxe-grid ref="tableRef" v-bind="gridOptions" style="height: 450px;">
          <template #toolbar_buttons>
          </template>


        </vxe-grid>
      </template>

    </BasicForm>

  </BasicDrawer>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicForm, useForm, ApiSelect } from '@/components/Form';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import {formSchema, teamUserColumns} from './role.data';
import util from "@/utils/util";

import { useModal } from "@/components/Modal";
import { postRequestSave,officeChangeList } from '@/api/sys/sysData';
import { useMessage } from "@/hooks/web/useMessage";
import { useUserStore } from "@/store/modules/user";
import {BasicTableProps} from "@/components/VxeTable";

import {Button, Descriptions, DescriptionsItem} from "ant-design-vue";
const userStore = useUserStore();

const [registerModal, { openModal }] = useModal();

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const dataList = ref({});
const { createMessage } = useMessage();

const id = ref("");
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate }] = useForm({
  labelWidth: 100,
  baseColProps: { lg: 12, md: 24 },
  schemas: formSchema,
  showActionButtonGroup: false,
});


const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  //打开弹层后的回调
  resetFields();
  setDrawerProps({ confirmLoading: false });
  // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
  // if (unref(treeData).length === 0) {
  //   treeData.value = (await getMenuList()) as any as TreeItem[];
  // }
  isUpdate.value = !!data?.isUpdate;
  id.value = "";
  dataList.value=data;
  if (unref(isUpdate)) {
    id.value = data.postRequestId;
    setFieldsValue(data);
  } else {
    //新增
    tableRef.value.reloadData([]);

  }
});

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: teamUserColumns,
  filterConfig: {
    remote: true,
  },
  expandConfig: {
    padding: true
  },
  showFooter: true,
  footerData: [
    { userName: '合计' }
  ],
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    // enabled: true,
  },
  pagerConfig: {
    // pageSize: 20,
  },
  proxyConfig: {
    enabled: false,
  },
});

const tableRef = ref();

const getTitle = computed(() => (!unref(isUpdate) ? '新增岗位要求' : '编辑岗位要求'));

async function handleSubmit() {
  try {
    const values = await validate();
    // let t_list = tableRef.value.getTableData().tableData;
    // values.items = t_list;
    setDrawerProps({ confirmLoading: true });
    // TODO custom api
    values.postRequestId = id.value;
    createFn(values);
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}

function createFn(values) {
  postRequestSave(values).then((res) => {
    // console.log("---res::",res)
    if (res.code == 200) {
      createMessage.success(res.message);
    } else {
      createMessage.error(res.message);
    }
  })
    .catch((res) => {
      createMessage.error(res.message);
    })
    .finally(() => {
      closeDrawer();
      emit('success');
    });
}




</script>
